<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>鲜蔬批发商城</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        }
        body {
            background-color: #f5f5f5;
            color: #333;
        }
        header {
            background-color: #4CAF50;
            color: white;
            padding: 15px;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            position: relative;
        }
        .user-btn {
            position: absolute;
            right: 15px;
            top: 15px;
            background: none;
            border: none;
            color: white;
            font-size: 16px;
            cursor: pointer;
        }
        .search-box {
            padding: 10px;
            background-color: white;
        }
        .search-input {
            width: 100%;
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 20px;
            font-size: 14px;
            outline: none;
        }
        .nav {
            display: flex;
            background-color: white;
            padding: 10px 0;
            overflow-x: auto;
            border-bottom: 1px solid #eee;
        }
        .nav-item {
            flex: 0 0 auto;
            padding: 8px 15px;
            margin: 0 5px;
            border-radius: 20px;
            background-color: #f1f1f1;
            font-size: 14px;
            cursor: pointer;
        }
        .nav-item.active {
            background-color: #4CAF50;
            color: white;
        }
        .goods-list {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            padding: 10px;
        }
        .goods-item {
            background-color: white;
            border-radius: 8px;
            padding: 10px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .goods-img {
            width: 100%;
            height: 120px;
            background-color: #eee;
            border-radius: 5px;
            margin-bottom: 8px;
            object-fit: cover;
        }
        .goods-name {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .goods-price {
            color: #f44336;
            font-weight: bold;
            font-size: 15px;
            margin-bottom: 8px;
        }
        .add-cart {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
        }
        .cart-icon {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 50px;
            height: 50px;
            background-color: #4CAF50;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            cursor: pointer;
        }
        .cart-count {
            position: absolute;
            top: -5px;
            right: -5px;
            background-color: #f44336;
            color: white;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 100;
        }
        .modal-content {
            background-color: white;
            width: 90%;
            max-width: 400px;
            border-radius: 8px;
            padding: 20px;
        }
        .modal-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
            text-align: center;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-size: 14px;
        }
        .form-control {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        .btn {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
        }
        .btn-primary {
            background-color: #4CAF50;
            color: white;
            margin-bottom: 10px;
        }
        .btn-close {
            background-color: #eee;
            color: #333;
        }
        .cart-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            display: none;
            z-index: 100;
        }
        .cart-content {
            background-color: white;
            height: 80%;
            width: 100%;
            position: absolute;
            bottom: 0;
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
            padding: 20px;
            overflow-y: auto;
        }
        .cart-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
            text-align: center;
        }
        .cart-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #eee;
        }
        .cart-item-info {
            flex: 1;
        }
        .cart-item-name {
            font-size: 14px;
        }
        .cart-item-price {
            color: #f44336;
            font-size: 12px;
        }
        .cart-item-quantity {
            display: flex;
            align-items: center;
        }
        .quantity-btn {
            width: 25px;
            height: 25px;
            border: 1px solid #ddd;
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        .quantity {
            width: 30px;
            text-align: center;
            font-size: 14px;
        }
        .cart-footer {
            padding: 15px;
            border-top: 1px solid #eee;
            position: sticky;
            bottom: 0;
            background-color: white;
        }
        .total {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
            font-size: 16px;
        }
        .total-price {
            color: #f44336;
            font-weight: bold;
        }
        .checkout-btn {
            width: 100%;
            padding: 12px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
        }
        .success-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 101;
        }
        .success-content {
            background-color: white;
            width: 80%;
            max-width: 300px;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
        }
        .success-icon {
            font-size: 50px;
            color: #4CAF50;
            margin-bottom: 15px;
        }
        .empty-cart {
            text-align: center;
            padding: 30px 0;
            color: #999;
        }
        .close-cart {
            position: absolute;
            top: 15px;
            right: 15px;
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <header>
        未来之窗・蔬菜批销
        <button class="user-btn" id="loginBtn">登录</button>
    </header>
    
    <!-- 搜索框 -->
    <div class="search-box">
        <input type="text" class="search-input" id="searchInput" placeholder="搜索蔬菜名称...">
    </div>
    
    <div class="nav">
        <div class="nav-item active">全部蔬菜</div>
        <div class="nav-item">叶菜类</div>
        <div class="nav-item">根茎类</div>
        <div class="nav-item">瓜果类</div>
        <div class="nav-item">菌菇类</div>
        <div class="nav-item">特色蔬菜</div>
    </div>
    
    <div class="goods-list" id="goodsList">
        <!-- 商品项1 -->
        <div class="goods-item" data-name="新鲜青菜">
            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23e8f5e9'/%3E%3Ccircle cx='50' cy='40' r='20' fill='%2381c784'/%3E%3Cpath d='M50 60 L30 90 L70 90 Z' fill='%234caf50'/%3E%3C/svg%3E" class="goods-img" alt="青菜">
            <div class="goods-name">新鲜青菜</div>
            <div class="goods-price">¥1.8/斤</div>
            <button class="add-cart" data-id="1" data-name="新鲜青菜" data-price="1.8">加入进货单</button>
        </div>
        
        <!-- 商品项2 -->
        <div class="goods-item" data-name="优质胡萝卜">
            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23e8f5e9'/%3E%3Ccircle cx='50' cy='50' r='30' fill='%23ffcc80'/%3E%3Ccircle cx='50' cy='50' r='20' fill='%23ffb74d'/%3E%3C/svg%3E" class="goods-img" alt="胡萝卜">
            <div class="goods-name">优质胡萝卜</div>
            <div class="goods-price">¥2.5/斤</div>
            <button class="add-cart" data-id="2" data-name="优质胡萝卜" data-price="2.5">加入进货单</button>
        </div>
        
        <!-- 商品项3 -->
        <div class="goods-item" data-name="新鲜卷心菜">
            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23e8f5e9'/%3E%3Ccircle cx='50' cy='50' r='30' fill='%23aed581'/%3E%3Ccircle cx='50' cy='50' r='15' fill='%237cb342'/%3E%3C/svg%3E" class="goods-img" alt="卷心菜">
            <div class="goods-name">新鲜卷心菜</div>
            <div class="goods-price">¥1.2/斤</div>
            <button class="add-cart" data-id="3" data-name="新鲜卷心菜" data-price="1.2">加入进货单</button>
        </div>
        
        <!-- 商品项4 -->
        <div class="goods-item" data-name="生态南瓜">
            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23e8f5e9'/%3E%3Crect x='20' y='30' width='60' height='60' rx='30' fill='%23ffeb3b'/%3E%3Cpath d='M50 10 L30 30 L70 30 Z' fill='%23cddc39'/%3E%3C/svg%3E" class="goods-img" alt="南瓜">
            <div class="goods-name">生态南瓜</div>
            <div class="goods-price">¥2.8/斤</div>
            <button class="add-cart" data-id="4" data-name="生态南瓜" data-price="2.8">加入进货单</button>
        </div>
        
        <!-- 商品项5 -->
        <div class="goods-item" data-name="本地黄瓜">
            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23e8f5e9'/%3E%3Ccircle cx='50' cy='50' r='30' fill='%234fc3f7'/%3E%3Ccircle cx='50' cy='50' r='20' fill='%2303a9f4'/%3E%3C/svg%3E" class="goods-img" alt="黄瓜">
            <div class="goods-name">本地黄瓜</div>
            <div class="goods-price">¥3.5/斤</div>
            <button class="add-cart" data-id="5" data-name="本地黄瓜" data-price="3.5">加入进货单</button>
        </div>
        
        <!-- 商品项6 -->
        <div class="goods-item" data-name="有机西红柿">
            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100            100'%3E%3Crect width='100' height='100' fill='%23e8f5e9'/%3E%3Ccircle cx='50' cy='50' r='30' fill='%23ef5350'/%3E%3Ccircle cx='50' cy='50' r='15' fill='%23c62828'/%3E%3C/svg%3E" class="goods-img" alt="有机西红柿">
            <div class="goods-name">有机西红柿</div>
            <div class="goods-price">¥4.2/斤</div>
            <button class="add-cart" data-id="6" data-name="有机西红柿" data-price="4.2">加入进货单</button>
        </div>
    </div>
    
    <!-- 购物车图标 -->
    <div class="cart-icon" id="cartIcon">
        <span>🛒</span>
        <span class="cart-count" id="cartCount">0</span>
    </div>
    
    <!-- 登录模态框 -->
    <div class="modal" id="loginModal">
        <div class="modal-content">
            <div class="modal-title">用户登录</div>
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" class="form-control" placeholder="请输入用户名">
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" class="form-control" placeholder="请输入密码">
            </div>
            <button class="btn btn-primary" id="doLogin">登录</button>
            <button class="btn btn-close" id="closeLogin">取消</button>
        </div>
    </div>
    
    <!-- 购物车模态框 -->
    <div class="cart-modal" id="cartModal">
        <div class="cart-content">
            <button class="close-cart" id="closeCart">×</button>
            <div class="cart-title">我的进货单</div>
            <div id="cartItems">
                <!-- 购物车内容将通过JS动态生成 -->
                <div class="empty-cart">进货单是空的，快去添加商品吧~</div>
            </div>
            <div class="cart-footer">
                <div class="total">
                    <span>总计：</span>
                    <span class="total-price" id="totalPrice">¥0.00</span>
                </div>
                <button class="checkout-btn" id="checkoutBtn">提交订单</button>
            </div>
        </div>
    </div>
    
    <!-- 下单成功模态框 -->
    <div class="success-modal" id="successModal">
        <div class="success-content">
            <div class="success-icon">✓</div>
            <div class="success-text">订单提交成功！</div>
            <p style="margin-top: 10px; font-size: 14px; color: #666;">请通过线下方式完成结算</p>
            <button class="btn btn-primary" style="margin-top: 15px;" id="closeSuccess">确定</button>
        </div>
    </div>

    <script>
        // 初始化购物车数据
        function initCart() {
            const cartData = localStorage.getItem('vegetableCart');
            if (!cartData) {
                localStorage.setItem('vegetableCart', JSON.stringify([]));
            } else {
                updateCartCount();
            }
        }
        
        // 更新购物车数量显示
        function updateCartCount() {
            const cartData = JSON.parse(localStorage.getItem('vegetableCart') || '[]');
            const totalCount = cartData.reduce((total, item) => total + item.quantity, 0);
            document.getElementById('cartCount').textContent = totalCount;
        }
        
        // 渲染购物车内容
        function renderCart() {
            const cartData = JSON.parse(localStorage.getItem('vegetableCart') || '[]');
            const cartItemsContainer = document.getElementById('cartItems');
            const totalPriceElement = document.getElementById('totalPrice');
            
            if (cartData.length === 0) {
                cartItemsContainer.innerHTML = '<div class="empty-cart">进货单是空的，快去添加商品吧~</div>';
                totalPriceElement.textContent = '¥0.00';
                return;
            }
            
            let html = '';
            let totalPrice = 0;
            
            cartData.forEach(item => {
                const itemTotal = item.price * item.quantity;
                totalPrice += itemTotal;
                
                html += `
                    <div class="cart-item" data-id="${item.id}">
                        <div class="cart-item-info">
                            <div class="cart-item-name">${item.name}</div>
                            <div class="cart-item-price">¥${item.price}/斤</div>
                        </div>
                        <div class="cart-item-quantity">
                            <button class="quantity-btn minus" data-id="${item.id}">-</button>
                            <span class="quantity">${item.quantity}</span>
                            <button class="quantity-btn plus" data-id="${item.id}">+</button>
                        </div>
                    </div>
                `;
            });
            
            cartItemsContainer.innerHTML = html;
            totalPriceElement.textContent = `¥${totalPrice.toFixed(2)}`;
            
            // 绑定购物车数量调整事件
            document.querySelectorAll('.minus').forEach(btn => {
                btn.addEventListener('click', () => {
                    updateQuantity(btn.dataset.id, -1);
                });
            });
            
            document.querySelectorAll('.plus').forEach(btn => {
                btn.addEventListener('click', () => {
                    updateQuantity(btn.dataset.id, 1);
                });
            });
        }
        
        // 更新商品数量
        function updateQuantity(id, change) {
            let cartData = JSON.parse(localStorage.getItem('vegetableCart') || '[]');
            const itemIndex = cartData.findIndex(item => item.id === id);
            
            if (itemIndex === -1) return;
            
            cartData[itemIndex].quantity += change;
            
            // 如果数量为0，从购物车移除
            if (cartData[itemIndex].quantity <= 0) {
                cartData.splice(itemIndex, 1);
            }
            
            localStorage.setItem('vegetableCart', JSON.stringify(cartData));
            updateCartCount();
            renderCart();
        }
        
        // 添加商品到购物车
        function addToCart(id, name, price) {
            let cartData = JSON.parse(localStorage.getItem('vegetableCart') || '[]');
            const itemIndex = cartData.findIndex(item => item.id === id);
            
            if (itemIndex !== -1) {
                // 商品已存在，增加数量
                cartData[itemIndex].quantity += 1;
            } else {
                // 新增商品
                cartData.push({
                    id,
                    name,
                    price: parseFloat(price),
                    quantity: 1
                });
            }
            
            localStorage.setItem('vegetableCart', JSON.stringify(cartData));
            updateCartCount();
        }
        
        // 搜索功能
        function initSearch() {
            const searchInput = document.getElementById('searchInput');
            searchInput.addEventListener('input', () => {
                const keyword = searchInput.value.toLowerCase().trim();
                const goodsItems = document.querySelectorAll('.goods-item');
                
                goodsItems.forEach(item => {
                    const name = item.dataset.name.toLowerCase();
                    if (name.includes(keyword)) {
                        item.style.display = 'block';
                    } else {
                        item.style.display = 'none';
                    }
                });
            });
        }
        
        // 导航栏切换
        function initNav() {
            const navItems = document.querySelectorAll('.nav-item');
            navItems.forEach(item => {
                item.addEventListener('click', () => {
                    // 移除所有active类
                    navItems.forEach(nav => nav.classList.remove('active'));
                    // 给当前点击项添加active类
                    item.classList.add('active');
                    
                    // 这里可以添加分类筛选逻辑
                });
            });
        }
        
        // 初始化事件监听
        function initEvents() {
            // 登录按钮点击
            document.getElementById('loginBtn').addEventListener('click', () => {
                document.getElementById('loginModal').style.display = 'flex';
            });
            
            // 关闭登录模态框
            document.getElementById('closeLogin').addEventListener('click', () => {
                document.getElementById('loginModal').style.display = 'none';
            });
            
            // 执行登录
            document.getElementById('doLogin').addEventListener('click', () => {
                // 简单模拟登录
                const username = document.getElementById('username').value;
                if (username) {
                    alert(`欢迎回来，${username}！`);
                    document.getElementById('loginModal').style.display = 'none';
                } else {
                    alert('请输入用户名');
                }
            });
            
            // 打开购物车
            document.getElementById('cartIcon').addEventListener('click', () => {
                document.getElementById('cartModal').style.display = 'block';
                renderCart();
            });
            
            // 关闭购物车
            document.getElementById('closeCart').addEventListener('click', () => {
                document.getElementById('cartModal').style.display = 'none';
            });
            
            // 提交订单
            document.getElementById('checkoutBtn').addEventListener('click', () => {
                const cartData = JSON.parse(localStorage.getItem('vegetableCart') || '[]');
                if (cartData.length === 0) {
                    alert('请先添加商品到进货单');
                    return;
                }
                
                document.getElementById('cartModal').style.display = 'none';
                document.getElementById('successModal').style.display = 'flex';
                
                // 清空购物车
                localStorage.setItem('vegetableCart', JSON.stringify([]));
                updateCartCount();
            });
            
            // 关闭成功提示
            document.getElementById('closeSuccess').addEventListener('click', () => {
                document.getElementById('successModal').style.display = 'none';
            });
            
            // 添加到购物车按钮点击
            document.querySelectorAll('.add-cart').forEach(btn => {
                btn.addEventListener('click', () => {
                    const id = btn.dataset.id;
                    const name = btn.dataset.name;
                    const price = btn.dataset.price;
                    
                    addToCart(id, name, price);
                    alert(`${name} 已添加到进货单`);
                });
            });
        }
        
        // 页面加载完成后初始化
        window.onload = function() {
            initCart();
            initSearch();
            initNav();
            initEvents();
        };
    </script>
</body>
</html>